@header-height:0rem;

@header-v:1rem;

@headerBar-fsize:1.2rem;
@headerBar-height:@headerBar-fsize * 3;

@cashier-red:#ee6264;

.header-bar{
  font-size: @headerBar-fsize;
  position: relative;
  height:@headerBar-height;
  line-height:@headerBar-height;
  position: relative;
  border-bottom:1px solid @color-theme-gray;
  .left,.right{
    position: absolute;
    top:0;
  }

  .left{
    left:@header-v;
  }

  .right{
    right:@header-v;
  }

}

@nav-bar-bg:#60646b;
@nav-bar-width:20%;
@nav-content-width:100%-20%;

.cashier-content{
  position: absolute;
  top:@headerBar-height;
  bottom:0;
  width:100%;
  overflow: hidden;
  &:extend(.clearfix all);
}

.cashier-content-page{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow: auto;
}

.nav-bar,.nav-content{
  height:100%;
  overflow: hidden;
  float: left;
}

.nav-bar{
  width: @nav-bar-width;
  background-color: @nav-bar-bg;

  li{
    width:100%;
    text-align: center;
    border-left:5px solid transparent;
    cursor: pointer;
    &:hover{
      background-color: rgba(255,0,0,.3);
    }
    &.selected{
      background-color: rgba(255,0,0,.3);
      border-left:5px solid @cashier-red;
    }

    a,a:hover,a:focus,a:active{
      color: @color-theme-white;
      font-size:1rem;
      line-height:2.5;
      display: block;
    }

  }

}

.nav-content{
  width: @nav-content-width;
  position: relative;
  height:100%;
  overflow: hidden;
}

.pc{
  .page-wrapper{
    position: relative;
  }
}

.food-item{
  border-bottom: none;
}






